<template>
  <div class="percent">
    <el-progress
      type="circle"
      :percentage="percentage"
      :show-text="false"
    ></el-progress>
    <span>{{ time }}</span>
  </div>
</template>

<script>
export default {
  props: {
    time: {
      type: String,
      required: true,
    },
    percentage: {
      type: Number,
      required: true,
    },
  },
};
</script>

<style scoped>
.percent {
  width: 126px;
  height: 126px;
  position: relative;
  display: flex;
}

.percent > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}

.time-mh {
  animation: all 1s;
}

@keyframes all {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>